<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时公交查询系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header class="text-center my-4">
            <h1 class="display-4">实时公交查询系统</h1>
            <p class="lead">查询公交路线、实时位置和换乘信息</p>
        </header>

        <!-- 主页面 Tab 导航 -->
        <ul class="nav nav-tabs mb-4" id="mainTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="bus-search-tab" data-bs-toggle="tab" data-bs-target="#bus-search" type="button" role="tab" aria-selected="true">公交路线查询</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="realtime-tab" data-bs-toggle="tab" data-bs-target="#realtime" type="button" role="tab" aria-selected="false">实时位置</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="transfer-tab" data-bs-toggle="tab" data-bs-target="#transfer" type="button" role="tab" aria-selected="false">换乘查询</button>
            </li>
        </ul>

        <!-- Tab 内容 -->
        <div class="tab-content" id="mainTabContent">
            <!-- 公交路线查询 -->
            <div class="tab-pane fade show active" id="bus-search" role="tabpanel" aria-labelledby="bus-search-tab">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">公交路线查询</h3>
                        <form id="bus-search-form" class="mb-4">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="bus-city-input" class="form-label">选择城市</label>
                                    <input type="text" class="form-control" id="bus-city-input" list="bus-city-list" placeholder="输入城市名称" required>
                                    <datalist id="bus-city-list">
                                        <!-- 城市选项将通过JavaScript动态填充 -->
                                    </datalist>
                                    <input type="hidden" id="bus-city-id">
                                </div>
                                <div class="col-md-6">
                                    <label for="bus-keywords" class="form-label">公交线路</label>
                                    <input type="text" class="form-control" id="bus-keywords" placeholder="如：1、301、地铁1号线" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">查询</button>
                        </form>
                        <div id="bus-search-results" class="mt-4">
                            <!-- 查询结果将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实时位置 -->
            <div class="tab-pane fade" id="realtime" role="tabpanel" aria-labelledby="realtime-tab">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">实时位置查询</h3>
                        <div class="alert alert-info">
                            请先查询公交路线，然后选择需要查看实时位置的线路
                        </div>
                        <div id="realtime-results" class="mt-4">
                            <!-- 实时位置结果将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 换乘查询 -->
            <div class="tab-pane fade" id="transfer" role="tabpanel" aria-labelledby="transfer-tab">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">换乘查询</h3>
                        <form id="transfer-form" class="mb-4">
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="transfer-city-input" class="form-label">选择城市</label>
                                    <input type="text" class="form-control" id="transfer-city-input" list="transfer-city-list" placeholder="输入城市名称" required>
                                    <datalist id="transfer-city-list">
                                        <!-- 城市选项将通过JavaScript动态填充 -->
                                    </datalist>
                                    <input type="hidden" id="transfer-city-id">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="start-location" class="form-label">起点</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="start-location" placeholder="如：火车站" required>
                                        <button class="btn btn-outline-secondary" type="button" id="search-start">搜索</button>
                                    </div>
                                    <div id="start-location-results" class="mt-2"></div>
                                </div>
                                <div class="col-md-6">
                                    <label for="end-location" class="form-label">终点</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="end-location" placeholder="如：动物园" required>
                                        <button class="btn btn-outline-secondary" type="button" id="search-end">搜索</button>
                                    </div>
                                    <div id="end-location-results" class="mt-2"></div>
                                </div>
                            </div>
                            <input type="hidden" id="start-imlgn">
                            <input type="hidden" id="end-imlgn">
                            <button type="submit" class="btn btn-primary">查询换乘路线</button>
                        </form>
                        <div id="transfer-results" class="mt-4">
                            <!-- 换乘结果将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html> 